<template>
  <div>
    <!-- 查询框 -->
    <el-row style="margin: 0px 0px 30px 0px">
      <el-col :span="18">
        <el-input placeholder="请输入内容" v-model="select_value" style="background-color: #fff;">
          <el-select
            v-model="select_key"
            slot="prepend"
            placeholder="查询类型"
            style="width: 130px; "
          >
            <el-option label="客户编号" value="com_id"></el-option>
            <el-option label="公司名称" value="com_name"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="selectByPrimaryKey()">查询</el-button>
        </el-input>
      </el-col>

      <!-- 新建服务 -->
      <el-col :span="2" :offset="1">
        <el-button type="primary" round @click="createNewService()">新建服务</el-button>
      </el-col>
    </el-row>

    <el-row style="margin-top:15px">
      <!-- 客户服务信息列表 -->
      <el-card shadow="hover">
        <!-- 卡片头部 -->
        <div slot="header" class="clearfix" >
          <el-row style="height:40px">
            <el-col :span="16">
              <div
                style="font-size:20px; text-align:left; color:#000000; margin:10px 0px 0px 10px"
              >客户服务信息列表</div>
            </el-col>
          </el-row>
        </div>
        
        <!-- 列表 -->
        <el-table
          ref="service_List"
          :data="pageInfo.list"
          highlight-current-row
          stripe
          border
          style="width: 100%"
        >
          <el-table-column property="svr_id" label="序号" align="center"></el-table-column>

          <el-table-column property="com_id" label="客户编号" align="center"></el-table-column>

          <el-table-column property="company.com_name" label="客户名称" align="center"></el-table-column>

          <el-table-column property="svr_title" label="概要" align="center"></el-table-column>

          <el-table-column  label="服务类型" align="center">
              <div slot-scope="scope">
              <span v-if="scope.row.svr_status==0">
                  咨询
              </span>
               <span v-else-if="scope.row.svr_status==1">
                  建议
              </span>
               <span v-else>
                  计划
              </span>
              </div>
              
              
          </el-table-column>

          <el-table-column property="svr_createcode" label="创建人" align="center"></el-table-column>

          <el-table-column property="svr_createtime" label="创建时间" align="center" type="date"></el-table-column>

          
          <el-table-column align="center">
            <template slot-scope="scope">
            <el-button type="warning" round @click="modify(scope.row)">处理

            </el-button>
            </template>
            </el-table-column>
        </el-table>       
      </el-card>
    </el-row>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[2, 10, 20, 30]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <!-- “新建服务”弹出框 -->
    <el-dialog ref="create_service_dialog" :visible.sync="createServiceDialogVisible" title="创建服务">
      <el-form :model="createServiceFormData" label-width="100px" :rules="rules" ref="ruleForm">
        <!-- 表单第一行 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建人">
              <el-input v-model="createServiceFormData.svr_createcode" :disabled="true" style="width:100%"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="服务类型" prop="svr_status">
              <el-select v-model="createServiceFormData.svr_status" style="width:100%">
                <el-option label="咨询" value="0"></el-option>
                <el-option label="建议" value="1"></el-option>
                <el-option label="计划" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 表单第二行 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="com_id">
              <el-select v-model="createServiceFormData.com_id" style="width:100%">
                <el-option v-for="item in companyData" :key="item.com_id" :label="item.com_name" :value="item.com_id"></el-option>
                
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="状态">
              <el-input
                v-model="createServiceFormData.type"
                style="width:100%"
                :disabled="true"
                placeholder="新创建"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 表单第三行 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="概要" prop="svr_title">
              <el-input v-model="createServiceFormData.svr_title" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 表单第四行 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="服务请求" prop="svr_content">
              <el-input v-model="createServiceFormData.svr_content" type="textarea" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 表单第五行 -->
        <el-row>
          <el-col :span="20">
            <el-form-item label="日期" prop="svr_createtime">
              <el-date-picker
            v-model="createServiceFormData.svr_createtime"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
          </el-col>
       </el-row>
        
        <!-- 提交表单按钮 -->
        <el-form-item>
          <el-row>
            <el-col :span="4" :offset="20">
              <el-button type="primary" @click="submitCreateServiceForm('ruleForm')">创建服务</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageInfo: {
        list:[]
      },
      currentPage: 1,
      pageSize: 2,
      companyData:[],

      // 查询类型
      select_value:"",
      select_key:"",

      // “新建服务”弹出框显示控制
      createServiceDialogVisible: false,

      // “新建服务”弹出框表单数据
      createServiceFormData: {
        svr_id:"",
        svr_title:"",
        svr_content:"",
        svr_status:"",
        svr_createcode:"",
        com_id:"",
        type:""
      },

      // “客户服务信息”列表数据
      serviceListData: [
        
      ],

      rules:{
        svr_status:[
          {required: true, message: '请选择服务类型', trigger: 'change'}
        ],
        com_id:[
          {required: true, message: '请选择客户名称', trigger: 'change'}
        ],
        svr_title:[
          {required: true, message: '请输入概要', trigger: 'blur'}
        ],
        svr_content:[
          {required: true, message: '请输入服务请求', trigger: 'blur'}
        ],
        svr_createtime:[
          {required: true, message: '请选择日期', trigger: 'change'}
        ]
      }
    };
  },

  methods: {
    // 查询框-------------------------------------------------------
    selectByPrimaryKey() {
      this.loadData();
    },


    // 新建服务
    createNewService() {
      this.$axios.get("/companies").then((res)=> {
        this.companyData = res.data.data
      }).catch((error)=> {})
      this.createServiceDialogVisible = true;
    },
    // 提交表单
    submitCreateServiceForm(ruleForm) {
      this.$refs[ruleForm].validate((valid)=> {
        if(valid) {
          this.$axios
      .post("/save", this.createServiceFormData)
      .then((res)=> {
        this.createServiceDialogVisible = false;
        this.loadData();
        this.createServiceFormData.svr_id = "";
        this.createServiceFormData.svr_title = "";
        this.createServiceFormData.svr_content = "";
        this.createServiceFormData.svr_status = "";
        // this.createServiceFormData.svr_createcode = "";
        this.createServiceFormData.com_id = "";
        this.$notify({
        title:"成功",
        message:"服务创建成功",
        type: 'success'
        })
      })
      .catch((error)=>{})
        } else {
          console.log("error submit")
          return false
        }
      })

      
      
    },
    loadData() {
       if(this.select_key == '' && this.select_value != ''){
        this.$message({
            type: 'warning',
            message: '请选择查询类型!'
        });
      }else{

        this.$axios.get("/list",
          {params:{
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            key:this.select_key,
            value:this.select_value,
          }}
        ).then(resp=>{
            if(resp.data.status==1000){
              this.pageInfo = resp.data.data;
              // alert(this.userList)
            }
        }).catch(error=>{

        })

      }
    },
    modify(item) {  
      this.$router.push("/ServiceManagement/" + item.svr_id);
    },
    //val：每页的条目数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.loadData(); 
      console.log(`每页 ${val} 条`);
    },
    //val:当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
      console.log(`当前页: ${val}`);
    },
  },
  mounted() {
    this.createServiceFormData.svr_createcode = sessionStorage.getItem("user_name");
    this.loadData();
  }
};
</script>
